---
title: makeAssistantToolUI
---

import { ParametersTable } from "@/components/docs";

The `makeAssistantToolUI` utility is used to register a tool UI component with the Assistant.

## Usage

```tsx
import { makeAssistantToolUI } from "@assistant-ui/react";

const MyToolUI = makeAssistantToolUI({
  toolName: "myTool",
  render: ({ args, result, status }) => {
    // render your tool UI here
  },
});
```

## API

### Parameters

<ParametersTable
  type="AssistantToolUIProps<TArgs, TResult>"
  parameters={[
    {
      name: "toolName",
      type: "string",
      description:
        "The name of the tool. This must match the name of the tool defined in the assistant.",
    },
    {
      name: "render",
      type: "ComponentType<ToolCallMessagePartProps<TArgs, TResult>>",
      description:
        "A React component that renders the tool UI. Receives the following props:",
      required: true,
      children: [
        {
          type: "ToolCallMessagePartProps<TArgs, TResult>",
          parameters: [
            {
              name: "type",
              type: '"tool-call"',
              description: "The message part type",
            },
            {
              name: "toolCallId",
              type: "string",
              description: "Unique identifier for this tool call",
            },
            {
              name: "toolName",
              type: "string",
              description: "The name of the tool being called",
            },
            {
              name: "args",
              type: "TArgs",
              description: "The arguments passed to the tool",
            },
            {
              name: "argsText",
              type: "string",
              description: "String representation of the arguments",
            },
            {
              name: "result",
              type: "TResult | undefined",
              description: "The result of the tool execution (if complete)",
            },
            {
              name: "isError",
              type: "boolean | undefined",
              description: "Whether the result is an error",
            },
            {
              name: "status",
              type: "ToolCallMessagePartStatus",
              description:
                'The execution status object with a type property: "running", "complete", "incomplete", or "requires_action"',
            },
            {
              name: "addResult",
              type: "(result: TResult | ToolResponse<TResult>) => void",
              description:
                "Function to add a result (useful for human-in-the-loop tools)",
            },
            {
              name: "artifact",
              type: "unknown",
              description:
                "Optional artifact data associated with the tool call",
            },
          ],
        },
      ],
    },
  ]}
/>

### Returns

A React functional component that should be included in your component tree. This component doesn't render anything itself, but it registers the tool UI with the Assistant.

## Example

```tsx
import { makeAssistantToolUI } from "@assistant-ui/react";
import { AssistantRuntimeProvider } from "@assistant-ui/react";

const GetWeatherUI = makeAssistantToolUI({
  toolName: "get_weather",
  render: ({ args, result, status }) => {
    if (status.type === "requires_action")
      return <p>Getting weather for {args.location}...</p>;
    if (status.type === "running") return <p>Loading...</p>;
    if (status.type === "incomplete" && status.reason === "error")
      return <p>Error getting weather.</p>;
    if (status.type === "complete")
      return <p>The weather is {result.weather}.</p>;
    return null;
  },
});

function App() {
  return (
    <AssistantRuntimeProvider>
      {/* ...your other components */}
      <GetWeatherUI />
    </AssistantRuntimeProvider>
  );
}
```

This example shows how to create a simple UI for a `get_weather` tool. The UI will display different messages depending on the status of the tool execution.
